<template>
  <div>
    <Header :activIndex = "2"></Header>
    <div class="content">
      <div class="nav"> <myBread :breadList="breadList"></myBread></div>
      <div class="contents">
        <div class="pad">
          <div class="title"> {{this.cData.data1}}
            <div class="signSpan" @click="signSpanClick"><i class="sign"></i><span>我要报名</span> </div>
          </div>
          <detailTable :cText="cText" :cData="cData" :cCol="cCol"></detailTable>

          <div class="etabs">
            <div class="fixed" v-if='posf'>
                <div class="centers">
                    <el-tabs v-model="activeName" @tab-click="handleClick" >
                    <el-tab-pane label="增资项目基本情况" name="first" v-if="p_Arr.indexOf( 0 )  != -1"></el-tab-pane>
                    <el-tab-pane label="增资方基本情况" name="second" v-if="p_Arr.indexOf( 1 )  != -1"></el-tab-pane>
                    <el-tab-pane label="投资方资格条件与增资条件" name="third" v-if="p_Arr.indexOf( 3 )  != -1"></el-tab-pane>
                    <el-tab-pane label="信息披露期" name="fourth" v-if="p_Arr.indexOf( 4 )  != -1"> </el-tab-pane>
                    <el-tab-pane label="遴选方案" name="eighth" v-if="p_Arr.indexOf( 5 )  != -1"> </el-tab-pane>
                    <el-tab-pane label="交易公告" name="fifth" v-if="p_Arr.indexOf( 6 )  != -1"></el-tab-pane>
                    <el-tab-pane label="交易须知" name="sixth" v-if="p_Arr.indexOf( 7 )  != -1"></el-tab-pane>
                    <el-tab-pane label="附件下载" name="seventh" v-if="p_Arr.indexOf( 8 )  != -1"></el-tab-pane>                                         
                    </el-tabs> 
                </div>
            </div>

            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="增资项目基本情况" name="first" v-if="p_Arr.indexOf( 0 )  != -1">
                  <firstTable :cText="cText" :cData="dataForm.increaseBasicInfoDTO" :cCol="cCol"></firstTable>
              </el-tab-pane>
              <el-tab-pane label="增资方基本情况" name="second" v-if="p_Arr.indexOf( 1 )  != -1">
                  <secondTable :cText="cText" :cData="dataForm.increaseCapitalBasicInfoDTO" :cCol="cCol"></secondTable>
              </el-tab-pane>
              <el-tab-pane label="投资方资格条件与增资条件" name="third" v-if="p_Arr.indexOf( 3 )  != -1">
                  <thirdTable :cText="cText" :cData="dataForm.increaseBasicInfoDTO" :cCol="cCol"></thirdTable>
              </el-tab-pane>
              <el-tab-pane label="信息披露期" name="fourth" v-if="p_Arr.indexOf( 4 )  != -1">
                  <fourthTable :cText="cText" :cData="dataForm.increaseBasicInfoDTO" :cCol="cCol"></fourthTable>
              </el-tab-pane>
               <el-tab-pane label="遴选方案" name="eighth" v-if="p_Arr.indexOf( 5 )  != -1">
                  <eighthTable :cText="cText" :cData="dataForm.increaseBasicInfoDTO" :cCol="cCol"></eighthTable>
              </el-tab-pane>             
              <el-tab-pane label="交易公告" name="fifth" v-if="p_Arr.indexOf( 6 )  != -1">
                  <fifthTable cType="1" :cData="dataForm.increaseBasicInfoDTO" :cCol="cCol"></fifthTable>
              </el-tab-pane>
               <el-tab-pane label="交易须知" name="sixth" v-if="p_Arr.indexOf( 7 )  != -1">
                  <fifthTable cType="2" :cData="dataForm.increaseBasicInfoDTO" :cCol="cCol"></fifthTable>    
              </el-tab-pane>
              <el-tab-pane label="附件下载" name="seventh" v-if="p_Arr.indexOf( 8 )  != -1">
                   <sixthTable  :cData="dataForm.annexDTOList" :cCol="cCol"></sixthTable>  
              </el-tab-pane>                                         
            </el-tabs>
          </div>
        </div>
      </div>
    </div>

    <el-dialog title="基本信息" :visible.sync="dialogTableVisible">
      <el-form :model="form" style="width:60%" :rules="rules" ref="form">
        <el-form-item label="联系人" :label-width="formLabelWidth"  prop="name">
          <el-input v-model="form.name" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth" prop="phone">
          <el-input v-model="form.phone" autocomplete="off" ></el-input>
        </el-form-item> 
        <el-form-item label="留言" :label-width="formLabelWidth" prop="mess">
          <el-input type="textarea" v-model="form.mess" ></el-input>
        </el-form-item>              
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import myBread from "~/components/bread";
import detailTable from "~/components/project/detailTable";
import firstTable from "~/components/project/increase_firstTable";
import secondTable from "~/components/project/increase_secondTable";
import thirdTable from "~/components/project/increase_thirdTable";
import fourthTable from "~/components/project/fourthTable";
import fifthTable from "~/components/project/fifthTable";
import sixthTable from "~/components/project/sixthTable";
import eighthTable from  "~/components/project/increase_eighthTable";
import { getDetail, setDetail } from "~/store/auth";
import Header from "~/components/header"	
export default {   
  components: {
    Header,
    myBread,
    detailTable,
    firstTable,
    secondTable,
    thirdTable,
    fourthTable,
    fifthTable,
    sixthTable,
    eighthTable
  },
  data() {
    return {
      breadList: [Array],
      p_Arr:[],
      dataForm:{},
      rules: {
          name: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
          phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
          mess: [{ required: true, message: '请输入留言', trigger: 'blur' }]
      },      
      form:{
        name:"",
        phone:"",
        mess:""
      },
      formLabelWidth:'120px',
      dialogTableVisible:false,
      posf:false,
      activeName: "first",
      headerIndex: 2,
      breadList: [Array],
      datas: [],
      html: ``,
      cText: [
        {
          text1: "标的名称",
          text2: "标的编号"
        },
        {
          text1: "信息披露起始日期",
          text2: "信息披露结束日期"
        },
        {
          text1: "融资方所在地区",
          text2: "融资方所属行业"
        },
        {
          text1: "拟募集资金金额 ",
          text2:"拟募集资金对应持股比例或股份数"
        },
        {
          text1: "联系人及电话"
        }
      ],
      cCol: [
        {
          name1: "data1",
          name2: "data2"
        },
        {
          name1: "data3",
          name2: "data4"
        },
        {
          name1: "data5",
          name2: "data6"
        },
        {
          name1: "data7",
          name1: "data8"
        },
        {
          name1: "data9"
        }
      ],
      cData: {
        data1: "",
        data2: "",
        data3: "",
        data4: "",
        data5: "",
        data6: "",
        data7: "",
        data8: ""
      }
    };
  },
  methods: {
      getBreadcrumb(title) {
        let matched = this.$route.matched;
        // console.log(matched)
        matched[0].meta.title = title;
        matched = [
            { path: "/", meta: { title: "首页" } },
            { path: "/projectAnnouncement", meta: { title: "项目" } }
        ].concat(matched);
        this.breadList = matched;
      },   
      submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },   
    signSpanClick(){
       this.dialogTableVisible = true
    },
    handleClick(tab, event) {
        if (document.documentElement.scrollTop){
            document.documentElement.scrollTop = 400;
        }
        if (document.body.scrollTop){
            document.body.scrollTop = 400 ;
        }
    },
    getList() {
      getNew()
        .then(res => {
          this.html = res.data.list[0].newsContent;
        })
        .catch(err => {
          console.log(err);
        });
    },
    getBreadcrumb(title) {
      let matched = this.$route.matched;
      // console.log(matched)
      matched[0].meta.title = title;
      matched = [
        { path: "/", meta: { title: "首页" } },
        { path: "/transfer", meta: { title: "项目" } }
      ].concat(matched);
      this.breadList = matched;
    },
    scrollDs() {
        this.scroll = window.scrollY
        this.scroll > 500?this.posf = true:this.posf = false;
    },
     getDate(id) {
      let subjectId = this.$route.query.id
      this.get(`/api/subjectmaininfo/${subjectId}`).then(res => {
        this.cData = {};
        this.cData.data1 = res.data.subjectMainInfoDTO.subjectName,
        this.cData.data2 = res.data.subjectMainInfoDTO.subjectNum,
        this.cData.data3 = res.data.subjectMainInfoDTO.disclosureStartDate,
        this.cData.data4 = res.data.subjectMainInfoDTO.disclosureEndDate,
        this.cData.data5 = res.data.subjectMainInfoDTO.subjectCompanyArea,
        this.cData.data6 = res.data.subjectMainInfoDTO.subjectCompanyIndustry,
        this.cData.data7 = res.data.subjectMainInfoDTO.fundraisingFunds,
        this.cData.data8 = res.data.subjectMainInfoDTO.sharesNum,
        this.cData.data9 = res.data.subjectMainInfoDTO.contactInfo,
        
        this.dataForm = res.data
        this.getBreadcrumb(this.cData.data1);
        // // alert(this.dataForm.subjectMainInfoDTO.disclosure)
        this.p_Arr = JSON.parse(this.dataForm.subjectMainInfoDTO.disclosure) || []
        })
        .catch(err => {
            console.log(err);
        });
    },   
  },
    mounted () {//给window添加一个滚动滚动监听事件
        window.addEventListener('scroll', this.scrollDs)
    },  
  created() {
    this.datas = getDetail("project_dname");
    // this.getBreadcrumb(this.datas.subjectName);
    // this.getList();
    let id = this.$route.query.id;
    this.getDate(id);
  }
};
</script>

<style lang="scss" scoped>
.contents {
  text-align: left;
  margin-top: 20px;
  border: solid 1px #cccccc;
  min-height: 890px;
}
.content .title {
  font-family: SimHei;
  font-size: 24px;
  color: #333333;
  margin-bottom: 20px;
}
.pad {
  padding: 25px 20px;
}
.mar {
  margin-left: 40px;
}
.p_text {
  display: inline-block;
  font-family: SimHei;
  font-size: 14px;
  color: #333333;
  margin-top: 20px;
}
.line_div {
  width: 1162px;
  border-bottom: solid 2px #db1004;
  text-align: center;
  line-height: 55px;
  margin: 0 auto;
  margin-top: 18px;
}
.line_div p {
  font-family: SimHei;
  font-size: 24px;
  color: #db1004;
}
.showContent {
  margin-top: 25px;
  text-align: left;
}
.showWord {
  width: 700px;
  margin: 0 auto;
  margin-top: 10px;
}
.showWord_title {
  font-family: SimHei;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
}
.min_width {
  min-width: 100px;
  text-indent: 0em;
  display: inline-block;
  text-align: left;
}
.under-line {
  border-bottom: solid 1px black;
  display: inline-block;
  line-height: 30px;
  text-align: left;
}
.showtext_title {
  font-size: 14px;
  line-height: 50px;
}
.showtext_title p {
  text-indent: 2em;
}
.showtext_right {
  text-align: right;
}
.html_content {
  padding: 20px 20px 60px 20px;
}
.etabs{
    margin-top: 10px
}
.fixed{position: fixed;top:0;left: 0;width: 100%;z-index: 9999;}
.fixed .centers{width: 1159px; margin:0 auto}


</style>